<template>
  <div>
    <Breadcrumb>
      <BreadcrumbItem>门店管理</BreadcrumbItem>
      <BreadcrumbItem>门店列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="requestShop" inline>
      <FormItem>
        <Input
          type="text"
          v-model="requestShop.name"
          clearable
          placeholder="请输入门店名称"
        />
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px"
        >搜索</Button
        >
        <Button type="primary"  style="margin-right: 10px">导出</Button>
        <Button type="primary" @click="addShop" style="margin-right: 10px">添加门店</Button>
      </FormItem>
    </Form>

    <div>
      <Table :columns="columns1" :data="tableData" :height="height">
        <template slot-scope="{ row }" slot="option">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            v-hasPermission="['37']"
            @click="onShowDevMgt(row.id)"
          >设备管理</Button
          >
        </template>
        <template slot-scope="{ row }" slot="device_count">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            v-hasPermission="['37']"
            @click="viewShopDevices(row.id)"
          >查看设备({{row.device_num}})</Button
          >
        </template>
      </Table>
    </div>

    <div style="display: flex; justify-content: center; margin-top: 24px">
      <Page
        background
        layout="prev, pager, next"
        :page-size="params.limit"
        :total="params.total"
        @on-change="handleCurrentChange"
        :current-page="params.page"
        @on-page-size-change="handleSizeChange"
      />
    </div>
    <Modal v-model="modal1"   @on-ok="confirmAddShop" @on-cancel="cancelAddShop" :mask-closable="false">
      <Form ref="formAddShop" :model="editShop" :label-width="110" >
        <div class="door_device"><h4>门店新增</h4></div>
        <FormItem label="门店名称" prop="name">
          <Input  v-model="editShop.name" placeholder="请输入门店名称"></Input>
        </FormItem>
        <FormItem label="价格基准" prop="price_rule" >
          <Input  v-model="editShop.price_rule" value="1" ></Input>
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="modal3" :mask-closable="false" width="1000" :ok-text="okText" @on-ok='onBindUnBind'>
      <Form :label-width="110">
        <div><h4 class="door_device">点击绑定设备管理</h4></div>
        <Tabs     v-model='tabName' @on-click="tabClick(tabName)">
          <TabPane label="未绑定设备"  name="name1">
            <Form ref="formUnbindDevices" :model="requestDev" inline>
              <FormItem prop='device_id'>
                <Input v-model="requestDev.device_id"  type="text"  clearable placeholder="请输入设备编号" />
              </FormItem>
              <FormItem m prop='name'>
                <Input v-model="requestDev.name" type="text"  clearable placeholder="请输入设备名称" />
              </FormItem>
              <FormItem>
                <Button type="primary" @click="searchDevices" style="margin-right: 10px">搜索</Button>
              </FormItem>
              <Table ref="tableUnbindDevices" border :columns="columns3" :data="data3"></Table>
            </Form>
          </TabPane>
          <TabPane label="已绑定设备"   name="name2">
            <Form ref="formbindDevices" :model="requestDev" inline>
              <FormItem prop='device_id'>
                <Input v-model="requestDev.device_id"  type="text"  clearable placeholder="请输入设备编号" />
              </FormItem>
              <FormItem m prop='name'>
                <Input v-model="requestDev.name" type="text"  clearable placeholder="请输入设备名称" />
              </FormItem>
              <FormItem>
                <Button type="primary" @click="searchDevices" style="margin-right: 10px">搜索</Button>
              </FormItem>
              <Table ref="tablebindDevices" border :columns="columns3" :data="data3"></Table>
            </Form>

          </TabPane>
        </Tabs>
      </Form>

    </Modal>
    <Modal v-model="modal2"    :mask-closable="false">
      <Form :label-width="110">
        <div class="door_device"><h4 >门店设备</h4></div>
        <Table stripe :columns="columns2" :data="data2"></Table>
      </Form>
    </Modal>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        tabName: 'name1',
        okText: '绑定',
        columns2: [
          {
            title: '序号',
            key: 'id'
          },
          {
            title: '设备号',
            key: 'name'
          }
        ],
        columns3: [
          {
            width: 60,
            align: 'center',
            type: 'selection'
          },
          {
            title: '设备编号',
            key: 'id'
          },
          {
            title: '设备名称',
            key: 'name'
          }
        ],
        data3: [],
        data2: [],
        editShop:
          {
            name: '',
            price_rule: 0
          },
        requestShop:
          {
            page: 1,
            name: ''
          },
        params: {
          device_time: [],
          status: 1,
          user_id: '',
          order_id: '',
          activity_id: '',
          page: 1,
          limit: 20
        },
        total: 0,
        page: {},
        height: this.$store.state.height,
        modal1: false,
        modal2: false,
        modal3: false,
        data1: [
          {
            id: 1,
            title: '机器组3'
          },
          {
            id: 2,
            title: '机器组4'
          }
        ],
        requestDev: {
          type: 1,
          shop_id: 0,
          device_id: '',
          name: ''
        },
        columns1: [
          {
            title: '门店id',
            key: 'id',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '门店名称',
            key: 'name',
            minWidth: 300,
            align: 'center'
          },
          {
            title: '设备数',
            key: 'order_money',
            slot: 'device_count',
            minWidth: 150,
            align: 'center'
          },
          {
            title: '操作',
            slot: 'option',
            width: 200,
            align: 'center',
            fixed: 'right'
          }
        ],
        tableData: [],
        role_id: null
      }
    },
    mounted () {
      this.listShops()
    },
    methods: {
      confirmAddShop () {
        // this.allocated = []
        // this.undistributed = []
        this.axios.post('shop/add', this.editShop).then(res => {
          if (res.code === 1) {
            this.cancelAddShop()
            this.$Message.success('添加成功')
            this.listShops()
          };
        })
      },
      cancelAddShop () {
        this.model1 = false
        this.$refs.formAddShop.resetFields()
      },
      listShops () {
        this.axios.post('shop/shop_list', this.requestShop).then((res) => {
          console.log('----------------------')
          if (res.code === 1) {
            this.params.total = res.data.count
            this.params.curPage = res.data.curPage // 当前页
            this.params.countPage = res.data.countPage // 总页数

            this.tableData = res.data.list
          }
        })
      },
      search () {
        this.params.page = 1
        this.listShops()
      },
      addShop () {
        this.modal1 = true
      },
      tabClick (name) {
        this.tabName = name
        this.requestDev.name = ''
        this.requestDev.device_id = ''
        if (name === 'name1') {
          this.requestDev.type = 1
          this.okText = '绑定'
        }
        if (name === 'name2') {
          this.requestDev.type = 2
          this.okText = '解绑'
        }
        this.listDevices()
      },
      onShowDevMgt (shopId) {
        this.requestDev.shop_id = shopId
        this.requestDev.type = 1
        this.modal3 = true
        this.tabName = 'name1'
        this.okText = '绑定'
        this.listDevices()
      },
      searchDevices () {
        this.listDevices()
      },
      listDevices () {
        this.axios.post('shop/device_list', this.requestDev).then(res => {
          if (res.code === 1) {
            this.data3 = res.data
          };
        })
      },
      onCloseSetting () {
        this.modal3 = false
      },
      onBindUnBind () {
        let selectRows = 0
        if (this.requestDev.type === 1) {
          selectRows = this.$refs.tableUnbindDevices.getSelection()
        }
        if (this.requestDev.type === 2) {
          selectRows = this.$refs.tablebindDevices.getSelection()
        }
        if (selectRows.length === 0) {
          this.$Message.success('请选中要' + this.okText + '设备')
          return
        }
        var devIds = selectRows.map(item => item.id).join(',')
        var bindUnbindData =
          {
            shop_id: this.requestDev.shop_id,
            type: this.requestDev.type,
            device_ids: devIds
          }

        this.axios.post('shop/set_device', bindUnbindData).then(res => {
          if (res.code === 1) {
            this.$Message.success(this.okText + '成功')
            this.listShops()
          } else {
            this.$Message.success(this.okText + '失败')
          };
        })
      },
      viewShopDevices (shopId) {
        this.modal2 = true

        this.axios.post('shop/shop_device_list', { shop_id: shopId }).then(res => {
          if (res.code === 1) {
            this.data2 = res.data
          };
        })
      },
      setStatus (id, status) {
        var text = '确定要' + (status === 1 ? '启用' : '禁用') + '此机器组么？'
        this.$Modal.confirm({
          title: text,
          onOk: () => {
            this.$Message.success('操作成功')
          },
          onCancel: () => {}
        })
      },
      // goDel(id) {
      //   this.$router.push({ path: "/order/detail", query: { id } });
      // },
      timechange (val) {
        console.log(val)
      },
      handleSizeChange (val) {
        this.params.page = 1
        this.params.limit = val
        this.listShops()
      },
      handleCurrentChange (val) {
        this.requestShop.page = val

        this.listShops()
      }
    }
  }
</script>

<style>
  *{
    margin: 0;
    padding: 0;
  }
  .door_device{
    position: relative;
    top: -20px;
  }
</style>
